<template>
	<view class="center">
		<view class="topbar">
			<text class="back" @tap="goback()"> < </text>
			<text>个人中心</text>
		</view>
		<view class="user-center">
			<view class="item first">
				<text>头像</text>
				<image src="../../../static/icons/leju-logo.png"></image>
			</view>
			<view class="item">
				<text>用户名</text>
				<text class="info">{{userInfo.username}}</text>
			</view>
			<view class="item">
				<text>手机号</text>
				<text class="info">{{userInfo.tell}}</text>
			</view>
			<view class="item">
				<text>昵称</text>
				<text class="info">{{userInfo.nickname}}</text>
			</view>
		</view>
		<button @tap="logout">退出登录</button>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				userInfo:''
			};
		},
		onLoad(option) {
			// console.log(option.data)
			var info = option.data
			this.userInfo = JSON.parse(info)
		},
		methods:{
			goback(){
				uni.navigateBack({
				    delta: 1
				});
			},
			logout(){
				try {
				    uni.removeStorageSync('userData');
				} catch (e) {
				    // error
				}
				uni.switchTab({
				    url: '/pages/mine/mine',
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center{
		.topbar{
			position: relative;
			left: 0;
			top: 0;
			background-color: #354e44;
			color: #fff;
			width: 100%;
			height: 44px;
			line-height: 44px;
			text-align: center;
			z-index: 998;
			.back{
				font-size: 24px;
				position: absolute;
				left: 20px;
			}
		}
		.user-center{
			width: 100%;
			height: 244px;
			margin-top: 10px;
			.item{
			    width: 100%;
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			    font-size: 16px;
			    line-height: 47px;
			    box-sizing: border-box;
			    padding: 5px 15px;
			    border-bottom: 1px solid #E5E5E5;
				text{
					color: #494949;
					font-size: 16px;
					line-height: 47px;
				}
				.info{
				    color: #A1A1A1;
				}
			}
			.first{
				image{
					width: 60px;
					height: 60px;
					border-radius: 50%;
				}
			}
		}
		button{
		    position: fixed;
		    left: 50%;
		    bottom: 20%;
		    margin-left: -92px;
		    width: 185px;
		    height: 44px;
		    font-size: 16px;
		    color: #fff;
		    text-align: center;
		    line-height: 44px;
		    background: #1C4B47;
		    border-radius: 8px;
		}
	}
</style>
